<script>
import Navbar from "../../components/navbar.vue";
import dayjs from "dayjs";
export default {
  name: "project",
  components: {Navbar},
  data() {
    return {
      gList: [],
      show1: false,
      show2: false,
      show3: false,
      meetingType: '',
      projectType: [
        // 1房地产，2商业项目，3大型工业聚集区,4大型乡村经营性公共服务设施
        {
          id: '',
          name: '全部类型'
        },
        {
          id: 1,
          name: '规划设计方案'
        },
        {
          id: 2,
          name: '可行性研究报告'
        },
        {
          id: 3,
          name: '初步设计'
        },
        {
          id: 4,
          name: '工程变更'
        },
        {
          id: 5,
          name: '环境影响报告'
        },
        {
          id: 6,
          name: '其它会议'
        }
      ],
      projectStatus: '',
      projectStatusList: [
        { id: '', name: '全部状态' },
        { id: '0', name: '未审核' },
        { id: '1', name: '评审会议申请中' },
        { id: '2', name: '已通过' },
        { id: '3', name: '未通过' },
        { id: '4', name: '评审会议组织中' },
        { id: '5', name: '会中评审' },
        { id: '6', name: '已入库' },
        { id: '7', name: '开始会议' },
        { id: '8', name: '正在开会中' },
        { id: '9', name: '会议取消' },
        { id: '10', name: '会议结束' },
        { id: '11', name: '模拟排座' }
      ],
      // 默认七天前
      startDate: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
      endDate: dayjs().format('YYYY-MM-DD'),
      form: {
        projectName: '',
        meetingType: '',
        pocket: '',
        capital: '',
        contacts: '',
        phone: '',
        address: '',
        projectContent: '',
      },
      action: this.$baseUrl + '/api/common/interface/upload_img',
      fileList: []
    }
  },
  onShow(){
    this.getList()
  },
  computed: {
    size() {
      return this.$store.getters.getSize
    },
    meetingTypeText() {
      return this.projectType.find(item => item.id === this.form.meetingType).name
    },
    projectStatusText() {
      return this.projectStatusList.find(item => item.id === this.projectStatus).name
    },
    dateText() {
      return this.startDate + '~' + this.endDate
    }
  },
  methods: {
    successFile(e) {
      console.log(e)
      this.fileList.push({
        fileUrl: el.imgUrl
      })
    },
    removeFile(e) {
      console.log(e)
    },
    getList() {
      let list = []
      this.$api.getReviewGuide().then(res => {
        list = res.map((item,index) => {
          return {
            // title: index + 1 + '. ' + this.meetingType.find(el => el.id === item.meetingType).name,
            // content: item.content,
            title: index + 1 + '. ' + item.name,
            content: item.typeName
          }
        })
        this.gList = list
      }).catch((err) => {
        console.log(err)
      })
    },
    confirmMeet(item) {
      this.form.meetingType = item.id
      this.show2 = false
      this.getList()
    },
  }
}
</script>

<template>
  <div :class="['project-container',size]">
    <Navbar title="评审申报">
      <div class="right" @click="show1 = true">
        <image src="@/static/image/message.png" style="width: 26rpx;height: 28rpx"></image>
        <span class="font-12">评审指引</span>
      </div>
    </Navbar>
    <div class="project-content font-14">
      <div class="project-item ">
        <div class="label ">项目名称</div>
        <u-input v-model="form.projectName" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">会议类别</div>
        <div class="project-item-select" @click="show2 = true">
          <span>{{ meetingTypeText }}</span>
          <u-icon name="arrow-right" size="26" color="#999999"></u-icon>
        </div>
      </div>
      <div class="project-item ">
        <div class="label ">项目投资额（单位：￥/万元）</div>
        <u-input v-model="form.pocket" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">投资方</div>
        <u-input v-model="form.capital" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">联系人</div>
        <u-input v-model="form.contacts" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">联系电话</div>
        <u-input v-model="form.phone" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">建设地址</div>
        <u-input v-model="form.address" :height="60" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div class="label ">项目内容</div>
        <u-input type="textarea" v-model="form.projectContent" :height="200" placeholder="请输入" :placeholder-style="{ color: '#999999' }"></u-input>
      </div>
      <div class="project-item ">
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="label ">附件资料</div>
<!--          <u-icon name="plus-circle" color="#3D3D3D" size="32"></u-icon>-->
        </div>
        <div class="tips font-12" style="color: #999999;margin: 20rpx 0">
          支持的文件格式：jpg,png,jpeg
        </div>
        <div>
          <u-upload :action="action" max-count="99" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
        </div>
      </div>
    </div>
    <u-popup v-model="show1"  mode="bottom" border-radius="14">
      <div class="c-popup">
        <div class="c-popup-title">
          <div class="c-popup-title-icon" @click="show1 = false">
            <u-icon name="close" size="32"></u-icon>
          </div>
          <span class="font-18">评审指引</span>
        </div>
        <div class="c-popup-body">
          <div  v-for="item in gList">
            <div class="title1 font-14">
              {{item.title}}：
            </div>
            <div class="text-content font-16">
              {{item.content }}
            </div>
          </div>
        </div>
      </div>
    </u-popup>
    <u-popup v-model="show2" mode="bottom" border-radius="14">
      <div class="c-popup">
        <div class="c-popup-title">
          <div class="c-popup-title-icon" @click="show2 = false">
            <u-icon name="close" size="32"></u-icon>
          </div>
          <span class="font-18">筛选</span>
        </div>
        <div class="c-popup-body">
          <u-row gutter="16" style="width: 100%">
            <u-col span="6" v-for="item in projectType" @click="confirmMeet(item)">
              <div :class="['select-item font-16', item.id === form.meetingType ? 'active' : '']">
                {{ item.name }}
              </div>
            </u-col>
          </u-row>
        </div>
      </div>
    </u-popup>

  </div>
</template>

<style lang="scss">
.c-popup {
  .c-popup-title {
    height: 100rpx;
    border-bottom: 1px solid #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .c-popup-title-icon {
    position: absolute;
    left: 32rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .c-popup-body {
    padding: 32rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .select-item {
      margin-top: 16rpx;
      width: 100%;
      height: 70rpx;
      line-height: 64rpx;
      text-align: center;
      color: #262626;
      border: 1px solid #E4E4E4;
      border-radius: 22rpx;
      &.active {
        background-color: #0089FF;
        color: #ffffff;
      }
    }
  }
}

.project-content {
  overflow: auto;
  .project-item {
    margin: 10rpx 0;
    background-color: #ffffff;
    padding: 16rpx 32rpx;
    color: #333333;
    .project-item-select {
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.c-popup {
  .c-popup-title {
    height: 100rpx;
    border-bottom: 1px solid #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .c-popup-title-icon {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .c-popup-body {
    padding: 32rpx;
    max-height: 80vh;
    overflow: auto;
    .title1 {
      font-family: Source Han Sans;
    }
    .text-content {
      margin: 32rpx 0;
      background: #F6F6F6;
      border-radius: 20rpx;
      padding: 32rpx;
      color: #262626;
    }
  }
}

.project-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 14rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #2251F8;
    image {
      margin-right: 10rpx;
    }
  }
}
</style>
